<template>
<div >
  <!-- <MusicPlay></MusicPlay> -->

<!-- <music-play></music-play> -->
  
<!-- 底部导航栏 -->
<van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000" route  :fixed=true>
    <!-- 热评！！ -->
    <van-tabbar-item name="setting" icon="http://rul4y8e5f.hn-bkt.clouddn.com/%E5%8D%9A%E5%AE%A2%E5%9B%AD.png" to="/blogList">音乐故事</van-tabbar-item>

  <van-tabbar-item name="home" icon="http://rul4y8e5f.hn-bkt.clouddn.com/%E4%B8%BB%E9%A1%B5%20%282%29.png" to="/musicHome">主页</van-tabbar-item>
  <van-tabbar-item name="search" icon="http://rul4y8e5f.hn-bkt.clouddn.com/%E5%8F%91%E7%8E%B0.png" to="/musicRecPage">发现音乐</van-tabbar-item>
  <van-tabbar-item name="myinfo" icon="http://rul4y8e5f.hn-bkt.clouddn.com/%E4%B8%AA%E4%BA%BA.png" to="/userInfo">个人中心</van-tabbar-item>
  <van-tabbar-item name="friends" icon="http://rul4y8e5f.hn-bkt.clouddn.com/%E5%85%B3%E6%B3%A8%20%281%29.png" to='/myFollow'>关注</van-tabbar-item>

</van-tabbar>
</div>
</template>

<script>
// import MusicPlay from '@/components/MusicPlay.vue';
// import MusicPlayList from './MusicPlayList.vue'
// import MusicPlay from '@/components/MusicPlay.vue';

export default {
  name: 'BottomIndex',

    data() {
    return {
      show: false,
    };
  },

  methods: {
    showPopup() {
      this.show = true;
    },

    tochange(){
    
    },

  },
  comments: {
    // MusicPlayList,
    // MusicPlay,

  },
}
</script>

<style scope lang="less">
.down{
  position: absolute;
  // 底部位置
  bottom:50px;

  // 指定顶层 越大越顶
  z-index: 10;

}
.list{
  display: flex;
  justify-content: center;
  align-self: center;
  width: 100%;

}
.left{
  display: flex;
  justify-content: center;
  align-self: center;
  width: 50%;
  height: 50px;

}

.right{
  width: 50%;
  height: 50px;
}
</style>